<template>
  <div>
    <div class="banner">
      <swiper :options="{loop:true, autoplay:true, speed: 1000}">
        <swiper-slide>
          <div style="height: 107px;"><img src="../../../static/images/banner1.png"/></div>
        </swiper-slide>
        <swiper-slide>
          <div style="height: 107px;"><img src="../../../static/images/banner2.png"/></div>
        </swiper-slide>
        <swiper-slide>
          <div style="height: 107px;"><img src="../../../static/images/banner3.png"/></div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="main-box">
      <div class="title">
        <h3>学校要闻</h3>
        <a href="#">更多>></a>
      </div>
      <div class="news">
        <ul>
          <li v-for="(item, index) in  MsiteList.news" :key="index">
            <a href="#">
              <div class="news-date">
                <h5>{{item.day}}</h5>
                <span>{{item.date}}</span>
              </div>
              <div class="news-text">
                <h5 class="news-title">{{item.name}}</h5>
                <p>{{item.content}}</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <MsiteItem v-for="(msite, index) in MsiteList.mains" :key="index" :item="msite"/>
      <div class="lun">
        <div class="swiper-container slider autoplay lun-box">
          <swiper :options="{loop:true, autoplay:true, speed: 1000, slidesPerView: 3}">
            <swiper-slide>
              <div>
                <div class="lun_item">
                  <img src="../../../static/images/bun-1.png"/>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div>
                <div class="lun_item">
                  <img src="../../../static/images/bun-2.png"/>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div>
                <div class="lun_item">
                  <img src="../../../static/images/bun-3.png"/>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div>
                <div class="lun_item">
                  <img src="../../../static/images/bun-1.png"/>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import {reqMsite} from '../../api/index'
  import commonJs from '../../assets/js/commonJs'
  import MsiteItem from '../../components/MsiteItem/MsiteItem'

  export default {
    name: "MSite",
    components: {
      swiper,
      swiperSlide,
      MsiteItem
    },
    data() {
      return {
        MsiteList: []
      }
    },
    async mounted() {
      let result = await commonJs.openAjax(reqMsite(), true, true);
      if (result.code == 0) {
        this.MsiteList = result.data;
      }
    }
  }
</script>

<style scoped>

</style>
